@import '~antd/es/style/variable.less';

.searchBar {
  position: relative;
  min-height: 80px;
  margin-bottom: 20px;
  padding: 24px 20px 0 20px;
  overflow: hidden;
  background-color: @component-background;
  border-radius: 3px;
  box-shadow: 0 0 4px @shadow-color;
  transition: height 0.3s ease;
  .searchBarContent {
    .searchItem {
      display: inline-block;
      padding: 0 10px;
      :global {
        .ant-form-item-control {
          width: 0;
        }
        .ant-picker,
        .ant-input-number {
          width: 100%;
        }
        @media screen and (max-width: @screen-xs-max) {
          .ant-form-item .ant-form-item-label {
            flex: unset;
            max-width: 100%;
            padding: unset;
            line-height: unset;
            white-space: nowrap;
            text-align: right;
            &:after {
              position: relative;
              top: -0.5px;
              margin: 0 8px 0 2px;
              content: ':';
            }
          }
          .ant-form-item .ant-form-item-control {
            flex: 1 1;
            max-width: 100%;
          }
        }
      }
    }
    .searchEmptyItem {
      display: inline-block;
      height: 32px;
      margin-bottom: 24px;
      vertical-align: top;
    }
    .actionButton {
      position: absolute;
      right: 20px;
      display: inline-block;
      height: 56px;
      text-align: right;
      .actionButtonItem {
        margin: 0 5px;
      }
      .toggleButtonItem {
        padding: 0 5px;
        color: @link-color;
        font-weight: 500;
        cursor: pointer;
        .toggleButtonIcon {
          margin-right: 2px;
        }
        &:hover {
          color: @link-hover-color;
        }
      }
    }
  }
}
